<template>
  <div class="home-container">
      <Section1></Section1>
      <Section2></Section2>
      <Section3></Section3>
      <Section4></Section4>
      <Section5></Section5>
      <Section6></Section6>
      <Section7></Section7>
      <Section8></Section8>
      <Section13></Section13>
      <Section9></Section9>
      <Section10></Section10>
      <Section11></Section11>
      <Section12 @btnTap="btnTapHandler" :email="state.url3"></Section12>
      <Contact @btnTap="btnTapHandler"></Contact>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, defineAsyncComponent, reactive } from 'vue'
import Contact from '@/mobileComponents/contact/index.vue'
const Section1 = defineAsyncComponent(() => import('@/mobileComponents/section1/index.vue'))
const Section2 = defineAsyncComponent(() => import('@/mobileComponents/section2/index.vue'))
const Section3 = defineAsyncComponent(() => import('@/mobileComponents/section3/index.vue'))
const Section4 = defineAsyncComponent(() => import('@/mobileComponents/section4/index.vue'))
const Section5 = defineAsyncComponent(() => import('@/mobileComponents/section5/index.vue'))
const Section6 = defineAsyncComponent(() => import('@/mobileComponents/section6/index.vue'))
const Section7 = defineAsyncComponent(() => import('@/mobileComponents/section7/index.vue'))
const Section8 = defineAsyncComponent(() => import('@/mobileComponents/section8/index.vue'))
const Section9 = defineAsyncComponent(() => import('@/mobileComponents/section9/index.vue'))
const Section10 = defineAsyncComponent(() => import('@/mobileComponents/section10/index.vue'))
const Section11 = defineAsyncComponent(() => import('@/mobileComponents/section11/index.vue'))
const Section12 = defineAsyncComponent(() => import('@/mobileComponents/section12/index.vue'))
const Section13 = defineAsyncComponent(() => import('@/mobileComponents/section13/index.vue'))

const { proxy } = getCurrentInstance()
const state = reactive({
    url1: '',
    url2: '',
    url3: '',
    url4:''
})
onMounted(() => {
    // TG/WS/EMAIL
    proxy.$get('/url/TG').then(res => {
        // console.log('请求回调:' + JSON.stringify(res))
        state.url1 = res.data.url || ''
    })
    proxy.$get('/url/WS').then(res => {
        // console.log('请求回调:' + JSON.stringify(res))
        state.url2 = res.data.url || ''
    })
    proxy.$get('/url/EMAIL').then(res => {
        // console.log('请求回调:' + JSON.stringify(res))
        state.url3 = res.data.url || ''
    })
    proxy.$get('/url/KF').then(res => {
        // console.log('请求回调:' + JSON.stringify(res))
        state.url4 = res.data.url || ''
    })
})

const btnTapHandler = (type) => {
    switch (type) {
        case 'link1':
            window.open(state.url1, '__blank')
            break;
        case 'link2':
            window.open(state.url2, '__blank')
            break;
        case 'link3':

            break;
        case 'link4':
            console.log('111111')
            window.open(state.url4, '__blank')
            break;
    }
}
</script>

<style lang="scss" scoped>
.home-container {
  overflow: hidden;
  overflow-y: hidden;
}
</style>
